<template>
	<view>
		
			<top-bar fixed="relative"></top-bar>
		
		<view class="pay-money">
			<view>
				<view class="icon">
					<text class="cuIcon-moneybag"></text>
				</view>
				<view class="title">支付订单金额：</view>
				<view class="value">{{ JSON.parse(money).toFixed(2) }}<text class="unit">元</text></view>
			</view>
		</view>
		<!--<view class="padding-sm">
			<view class="block__title">使用积分</view>
			<checkbox-group @change="_checkIntegral">
				<view class="cu-list menu">
					<view class="cu-item ">
						<view class="content padding-tb-sm">
							<view>
								<view class="text-cut" style="width:220px">
									<checkbox value="Y" v-if="integral <=0" disabled="true" />
									<checkbox value="Y" activeBackgroundColor="#007aff" v-else />
								</view>
							</view>
						</view>
						<view class="action">
							<text class="text-grey text-sm">{{integral}}个积分</text>
						</view>
					</view>
				</view>
			</checkbox-group>
			<view class="text-right" @click="_viewGetIntegral()">如何获取积分？</view>
		</view>-->


		<view style="margin: 30rpx;">
			<button @click="_submit" class="btn-primary" :disabled="banButton">确认支付</button>
		</view>
		<tips ref="tipRef"></tips>
	</view>
</template>

<script>
	import topBar from "@/components/top-bar/top-bar.vue";
	import {
		isNotNull
	} from '../../lib/java110/utils/StringUtil.js';
	import {
		requestNoAuth
	} from '@/lib/java110/java110Request.js';
	import url from '@/constant/url.js';
	import {
		refreshUserOpenId,
		getOpenIdFromAliPay,
		getWechatMiniOpenId,
		getCommunityWechatAppId
	} from '../../api/pay/payApi.js';
	import {
		isWxOrAli
	} from '../../lib/java110/utils/EnvUtil.js';

	import tips from '@/components/utils/tips.vue';
	import {
		queryUserIntegral
	} from '@/api/user/userApi.js';

	export default {
		data() {
			return {
				shopId: '',
				money: 0.0,
				orgMoney: 0.0,
				business: '',
				openId: '',
				appId: '',
				data: {},
				cashierUserId: '',
				banButton: false, // 禁用支付按钮
				integral: '0',
				integralMoney: 0.00,
				useIntegral: 'N'
			}
		},
		mounted() {

		},
		components: {
			tips,
			topBar
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.cashierUserId = options.cashierUserId;
			let _that = this;
			this.money = options.money;
			this.orgMoney = options.money;
			this.business = options.business;
			this.data = uni.getStorageSync('doing_cashier');
			if (this.vc.hasLogin()) {
				this._loadUserIntegral();
			}
		},
		methods: {
			_submit: function() {
				this.banButton = true;
				let _data = this.data;
				_data.business = this.business;
				_data.tradeType = 'JSAPI';
				_data.appId = this.appId;
				_data.cashierUserId = this.cashierUserId;
				_data.openId = this.openId;
				_data.useIntegral = this.useIntegral;
				uni.setStorageSync('cashierSuccessUrl', _data.successUrl);

				this.cashierPayFee(_data, '/pages/order/cashierSuccess?cashierUserId=' + this.cashierUserId)
			},
			/**
			 * 收银台 支付
			 * @param {Object} _that
			 * @param {Object} _data
			 * @param {Object} _successUrl
			 */
			cashierPayFee: function(_data, _successUrl) {
				let _that = this;
				if (!_successUrl) {
					_successUrl = "/pages/order/order";
				}
				wx.showLoading({
					title: '支付中'
				});
				requestNoAuth({
					url: url.testCashier,
					method: "POST",
					data: _data,
					//动态数据
					success: function(res) {
						wx.hideLoading();
						let _json = res.data;
						if (_json.code == '0' || _json.code == '100') {
							uni.showToast({
								title: "支付成功",
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateTo({
									url: _successUrl
								})
							}, 2000)
							return;
						}
						uni.showToast({
							title: "缴费失败" + res.data.msg,
							icon: 'none',
							duration: 2000
						});
						_that.banButton = false;
					},
					fail: function(e) {
						wx.hideLoading();
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
						_that.banButton = false;
					}
				});

			},
			_loadUserIntegral: function() {
				let _that = this;
				queryUserIntegral({
					page: 1,
					row: 1,
				}).then(_data => {
					_that.integral = _data.integral;
					_that.integralMoney = _data.integralMoney;
				})
			},
			_checkIntegral: function(e) {
				let _value = e.detail.value;
				if (!_value || _value.length < 1) {
					this.useIntegral = 'N';
					this.money = this.orgMoney;
					return;
				}
				this.useIntegral = 'Y';
				if (parseFloat(this.integralMoney) > parseFloat(this.orgMoney)) {
					this.money = 0;
					return;
				}
				this.money = parseFloat(this.orgMoney) - parseFloat(this.integralMoney);
				this.money = this.money.toFixed(2);
			},
			_viewGetIntegral: function() {
				let _content = "您可以到商城购物或者物业缴费的方式获取积分，积分可以用来物业缴费和商城购物."
				this.$refs.tipRef.openTip('如何获取积分？', _content);
			}

		}
	}
</script>

<style lang="less" scoped>
	.pay-money {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500rpx;
		color: #FFF;
		text-align: center;
		background: linear-gradient(45deg, #F57C61, #FA5151);
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 200rpx;
			font-size: 100rpx;
			border: 8rpx solid #FFF;
			border-radius: 50%;
		}
		.title {
			font-size: 32rpx;
			margin-top: 25rpx;
		}
		.value {
			font-size: 72rpx;
			margin-top: 15rpx;
			.unit {
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}
	}
	button[disabled]::after {
		display: none;
	}
</style>